<!--
 * @Author: Haochen
 * @Date: 2021-12-15 14:26:32
 * @LastEditTime: 2021-12-26 16:36:44
 * @FilePath: \recipes-admin-system\src\components\charts\VipMembersRatio.vue
-->

<!--
 * @Author: Haochen
 * @Date: 2021-12-15 11:47:14
 * @LastEditTime: 2021-12-15 13:08:31
 * @FilePath: \students-system\src\components\charts\GenderRatio.vue
-->

<template>
  <div class="members-ratio-chart"></div>
</template>

<script>
import * as echarts from 'echarts';
import { createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('members');
var myChart;

export default {
  data() {
    return {
      members: [],
    };
  },
  computed: {
    chartData() {
      return {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        color: ['#7799fa', '#f44887', '#6f5ee3'],
        series: [
          {
            name: '用户中会员与非会员比例',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            // itemStyle: {
            //   borderRadius: 10,
            //   borderColor: '#fff',
            //   borderWidth: 2,
            // },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: this.members.filter((s) => s.vipdate).length,
                name: '会员',
              },
              {
                value: this.members.filter((s) => !s.vipdate).length,
                name: '非会员',
              },
            ],
          },
        ],
      };
    },
  },
  created() {
    this.getAllMembers();
  },
  methods: {
    ...mapActions(['getAllMembersAsync']),
    async getAllMembers() {
      const res = await this.getAllMembersAsync();
      this.members = res;
      // console.log(this.members);
    },
  },
  mounted() {
    myChart = echarts.init(document.querySelector('.members-ratio-chart'));
  },
  watch: {
    members() {
      this.chartData && myChart.setOption(this.chartData);
    },
  },
};
</script>

<style scoped>
.members-ratio-chart {
  width: 519px;
  height: 400px;
}
</style>
